<script setup>
/**导入组件**/
import {useRouter} from 'vue-router';
import {onMounted, ref} from 'vue'


/**初始化**/
const router = useRouter();
const greeting = ref('')


/**定义函数**/
// 问候
function getGreeting() {
  const hour = new Date().getHours()
  if (hour >= 5 && hour < 12) {
    return '早上好☀️，新的一天开始啦，一起加油学习吧～'
  } else if (hour >= 12 && hour < 18) {
    return '下午好～喝杯水，打起精神，我们继续努力吧 📚'
  } else if (hour >= 18 && hour < 22) {
    return '晚上好呀🌙，今天也要继续充实自己哦～'
  } else {
    return '夜深啦🌌，注意休息哦，但也别忘了坚持一下下 ✨'
  }
}

// 定义跳转函数
const goToPage = (path) => {
  router.push(path);
};


/**生命周期**/
onMounted(() => {
  greeting.value = getGreeting()
})
</script>

<template>
  <!-- 问候 -->
  <div class="greeting">
    <p>{{ greeting }}</p>
  </div>

  <!-- 模块 -->
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" :offset="2">
        <el-card class="dashboard-card" @click="goToPage('/intelligent-408-qna')" >
          <div class="card-content">
            <h3>智能化408答疑</h3>
            <p>快速解答408相关问题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/intelligent-408-search')">
          <div class="card-content">
            <h3>智能408搜题</h3>
            <p>精准搜索408相关题目</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/personalized-exercises')">
          <div class="card-content">
            <h3>408习题训练</h3>
            <p>让你随时随地训练真题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="2">
        <el-card class="dashboard-card" @click="goToPage('/error-book')">
          <div class="card-content">
            <h3>错题本</h3>
            <p>记录并复习错题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/clock')">
          <div class="card-content">
            <h3>学习钟计时</h3>
            <p>专注学习，高效备考</p>
          </div>
        </el-card>
      </el-col>
      <!-- 新增的 AI 出题卡片 -->
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/ai-question')">
          <div class="card-content">
            <h3>AI出题</h3>
            <p>智能生成408相关题目</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.greeting {
  @include hold(99, 20);

  //background-color: #2c3e50;
  margin-top: 5vh;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
}


.dashboard {
  margin-top: 5vh;
  padding: 20px;
}

.dashboard-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 50px;
  background-color: $global-background-color;

  &:hover {
    transform: translateY(-5px);
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;


    h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color:$global-font-color;
    }

    p {
      font-size: 14px;
      color:$global-font-color;
    }
  }
}
</style>